<template>
  <div class="float-box">
    <div class="line1">
      <el-tooltip v-for="option in options" :key="option.des" :content="option.name" placement="bottom">
        <div @click="gen(option.path)" class="option" :style="`${lastOp===option.path?'background: #e9e9e9;':''}`">
          {{option.des}}
        </div>
      </el-tooltip>
    </div>
    <div class="line2">
      <span>{{showText}}</span>
      <span class="blink" v-if="isGenerating">
        _
      </span>
    </div>
    <div class="line3" v-if="(!!genRes)&&(!isGenerating)">
      <div @click="btn.func" class="btn" v-for="btn in btns">
        {{ btn.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, reactive, ref, watch} from 'vue'
import {generate} from '../utils/index.js'

const props = defineProps(['selectedContent'])
const emit = defineEmits(['replace', 'insert'])
const genRes = ref('')
const showText = ref('')
const isGenerating = ref(false)
const lastOp = ref('')
const gen = (path) => {
  if (!isGenerating.value) {
    lastOp.value = path
    isGenerating.value = true
    showText.value = ''
    genRes.value = ''
    generate(path, {text: props.selectedContent}, (e) => {
      genRes.value += e
    }, () => {
      isGenerating.value = false
    })
  }
}
const options = reactive([
  {
    name: '改写',
    des: '改',
    path: 'rewrite',
  },
  {
    name: '续写',
    des: '续',
    path: 'continuation',
  },
  {
    name: '纠错',
    des: '检',
    path: 'check',
  },
  {
    name: '补全段落',
    des: '补',
    path: 'completion',
  }
])
const btns = reactive([
  {
    name: '替换',
    func: ()=>{emit('replace',genRes.value)}
  },
  {
    name: '插入',
    func: ()=>{emit('insert',genRes.value)}
  },
  {
    name: '重写',
    func: ()=>{gen(lastOp.value)}
  },
])
let intervalId = null;
watch(isGenerating,()=>{
  if (isGenerating.value) {
    let len = 0;
    let tmp_gen_len
    let last_gen_len = 0
    if (intervalId !== null) {
      clearInterval(intervalId);
    }
    intervalId = setInterval(() => {
      if (len < tmp_gen_len) {
        showText.value += genRes.value.slice(len, tmp_gen_len);
        len = tmp_gen_len;
      }
      if (len < genRes.value.length) {
        showText.value += genRes.value.slice(len, len + 1);
        len++;
      }
      if (genRes.value.length !== last_gen_len) {
        tmp_gen_len = last_gen_len
        last_gen_len = genRes.value.length
      }
    }, 100);
  }else{
    clearInterval(intervalId);
  }
})
onUnmounted(()=>{
  clearInterval(intervalId);
})
</script>

<style lang="scss" scoped>
.float-box{
  border: 1px solid #666;
  border-radius: 6px;
  background: white;
  padding: 5px 10px;
  width: 500px;
  .line1{
    display: flex;
    .option{
      border-radius: 0.3em;
      height: 2em;
      width: 2em;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7em;
      font-weight: 700;
      cursor: pointer;
      transition: .2s linear;
      &:hover{
        background: #f6f6f6;
      }
      &:not(:last-child){
        margin-right: .5em;
      }
    }
  }
  .line2{
    font-size: .7em;
    text-align: left;
    white-space: pre-line;
    .blink{
      animation: blink 1s step-end infinite;
    }
    @keyframes blink {
      0% {
        opacity: 1; /* 元素完全可见 */
      }
      50% {
        opacity: 0; /* 元素透明，即消失状态 */
      }
      100% {
        opacity: 1; /* 元素完全可见 */
      }
    }
  }
  .line3{
    display: flex;
    justify-content: flex-end;
    .btn{
      font-size: .7em;
      padding: .2em 1em;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      margin-right: 1em;
      cursor: pointer;
    }
  }
}
</style>
